<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
    <script src="../../js/jquery-3.5.1.js"></script>
</head>
<body>
<nav id="nav">
    <li><span></span><p>就东会员</p></li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
</nav>
<button id="btnBind">绑定事件</button>
<button id="btn">移除事件</button>
<script type="text/javascript">
    $(function () {
        //事件绑定
        // $("#nav li span").bind({
        //     "mouseover":function () {
        //         $(this).toggleClass("active").siblings().toggle();
        //     },
        //     "mouseout":function () {
        //         $(this).toggleClass("active").siblings().toggle();
        //     },
        //     click:function () {
        //         alert("click")
        //     }
        // })
        //事件移除
        $("#btn").click(function () {
            $("#nav li span").unbind()
        })
        $("#nav li span").hover(function () {
            //如果有样式就删除 如果没有添加
            $(this).toggleClass("active")
                .siblings().toggle();
            //如果元素显示就隐藏 如果隐藏就显示
        })
        $("#btnBind").click(function () {
            //后来动态添加元素
            let li = $("<li><span></span><p>咨询JIMI</p></li>");
            $("#nav").append(li);
            $("span",li).hover(function () {
                //如果有样式就删除 如果没有添加
                $(this).toggleClass("active")
                    .siblings().toggle();
                //如果元素显示就隐藏 如果隐藏就显示
            })
        })
    })

</script>
</body>
</html>